<template>
    <div class="phone-style-box">
        <ul class="outer-box">
            <li class="group-attribute-name"
                @click="baseGroupName=!baseGroupName">
                <i class="group-icon" :class="baseGroupName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span>基本</span>
            </li>
            <ul class="inner-box" :class="{'h0': !baseGroupName}">
                <li class="attr-item">
                    <div class="attr-item-label">宽度</div>
                    <div class="block">
                        <el-slider
                            v-model="appearance.base.width"
                            :show-input-controls="false"
                            input-size="mini"
                            show-input
                            :min="34">
                        </el-slider>
                    </div>
                </li>
                <li class="attr-item">
                    <div class="attr-item-label">高度</div>
                    <div class="block">
                        <el-slider
                            v-model="appearance.base.height"
                            :show-input-controls="false"
                            input-size="mini"
                            show-input
                            :min="25">
                        </el-slider>
                    </div>
                </li>
                <li class="attr-item">
                    <div class="attr-item-label">圆角</div>
                    <div class="block">
                        <el-input v-model="appearance.base.radius" size="mini" type="number"/>
                    </div>
                </li>
                <li class="attr-item">
                    <ColorPicker :options="appearance.base.btnColor"
                                 :config="{width: 71,labelName: '按钮颜色'}"/>
                </li>
                <li class="attr-item">
                    <ColorPicker :options="appearance.base.color"
                                 :config="{width: 71,labelName: '字体颜色'}"/>
                </li>
                <li class="attr-item">
                    <div class="attr-item-label">字体大小</div>
                    <div class="block text-four-block">
                        <el-select v-model="appearance.base.size"
                                   style="width: 100%;"
                                   size="mini"
                                   placeholder="字体大小">
                            <el-option
                                v-for="item in sizeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </li>
            </ul>
        </ul>
        <ul class="outer-box effect-outer-box">
            <li class="group-attribute-name"
                @click="effectGroupName=!effectGroupName">
                <i class="group-icon" :class="effectGroupName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span>展示效果</span>
            </li>
            <ul class="inner-box" :class="{'h0': !effectGroupName}">
                <li class="attr-item">
                    <div class="attr-item-label">展示效果</div>
                    <div class="block text-four-block">
                        <el-select v-model="appearance.effect.value"
                                   style="width: 100%;"
                                   size="mini"
                                   placeholder="默认效果">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </li>
            </ul>
        </ul>
        <ul class="outer-box bgc-outer-box">
            <li class="group-attribute-name"
                @click="bgcGroupName=!bgcGroupName">
                <i class="group-icon" :class="bgcGroupName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span>背景</span>
            </li>
            <ul class="inner-box" :class="{'h0': !bgcGroupName}">
                <li class="attr-item">
                    <ColorPicker :options="appearance.base.bgColor"
                                 :config="{width: 56,labelName: '背景色'}"/>
                </li>
            </ul>
        </ul>
        <YXPadding style="margin-top: 20px;" :padding="appearance.padding"/>
    </div>
</template>

<script>
    import YXPadding from '../common/contentstyle/Padding.vue';
    import ColorPicker from '../common/contentstyle/ColorPicker.vue';

    export default {
        name: 'PhoneStyle',
        components: {
            YXPadding,
            ColorPicker
        },
        props: {
            appearance: {
                type: Object,
                default: _ => {
                    return {
                        base: {
                            width: 90,
                            height: 44,
                            btnColor: {
                                color: 'rgba(248, 89, 89, 1)'
                            },
                            bgColor: {
                                color: 'rgba(255, 255, 255, 1)'
                            },
                            color: {
                                color: 'rgba(255, 255, 255, 1)'
                            },
                            size: '18',
                            radius: '4'
                        },
                        effect: {
                            value: ''
                        },
                        padding: {
                            groupName: '边距',
                            value: {
                                top: 0,
                                right: 0,
                                bottom: 0,
                                left: 0
                            }
                        }
                    };
                }
            }
        },
        data() {
            return {
                bgcGroupName: true,
                baseGroupName: true,
                effectGroupName: true,
                options: [
                    {label: '默认效果', value: ''},
                    {label: '顶部悬浮', value: 'top'},
                    {label: '底部悬浮', value: 'bottom'}
                ],
                sizeOptions: [
                    {label: '12px', value: '12'},
                    {label: '14px', value: '14'},
                    {label: '16px', value: '16'},
                    {label: '18px', value: '18'},
                    {label: '20px', value: '20'},
                    {label: '22px', value: '22'},
                    {label: '24px', value: '24'},
                    {label: '32px', value: '32'},
                    {label: '48px', value: '48'}
                ]
            };
        }
    }
</script>

<style scoped lang="scss">
    .phone-style-box {
        @import '../../../styles/init';
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, .15);

        .outer-box {
            .h0 {
                height: 0 !important;
                overflow: hidden;
            }
            .group-attribute-name {
                height: 20px;
                width: fit-content;
                user-select: none;
                color: #999;
                cursor: pointer;

                .group-icon {
                    font-size: 18px;
                }
            }
            .inner-box {
                height: 288px;
                overflow: hidden;
                transition: height .2s;

                .attr-item {
                    height: 38px;
                    display: flex;
                    justify-content: space-between;
                    overflow: hidden;
                    margin-top: 10px;

                    .attr-item-label {
                        padding-right: 12px;
                        line-height: 38px;
                    }
                    .block {
                        width: calc(100% - 43px);
                        line-height: 38px;
                    }
                    .block.text-four-block {
                        width: calc(100% - 71px);
                    }
                }
            }
        }
        @mixin com-outer-box {
            margin-top: 20px;
            padding-top: 12px;
            border-top: 1px solid #cccccc;
        }
        .effect-outer-box {
            @include com-outer-box;

            .inner-box {
                height: 48px;

                .attr-item {
                    .block {
                        width: calc(100% - 71px);
                    }
                }
            }
        }
        .bgc-outer-box {
            @include com-outer-box;
            .inner-box {
                height: 48px;

                .attr-item {
                    .block {
                        width: calc(100% - 56px);
                    }
                }
            }
        }
    }
</style>
<style lang="scss">
    .phone-style-box {
        .outer-box {
            .inner-box {
                .attr-item {
                    .el-slider__input.el-input-number--mini {
                        width: 52px;
                    }
                    .el-slider__runway {
                        width: 166px;
                    }
                }
            }
        }
    }
</style>
